<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="shortcut icon" href=""> -->

    <title>서클 / 가입하기</title>

    <!-- Bootstrap core CSS -->
    <link href="/resources/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="/resources/js/html5shiv.js"></script>
      <script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <link href='http://fonts.googleapis.com/css?family=Alef' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/resources/css/font-awesome.css">
    <style type="text/css">
    
    	body{
    		padding-top: 50px;
    		padding-bottom: 70px;
    		background-color: #f6f7f7;
    	}
    	@media screen and (max-width: 767px){ .conWidth{width:100%;}}
    	@media screen and (min-width: 768px){ .conWidth{width:80%;}}
    	@media screen and (min-width: 1100px){ .conWidth{width:55%;}}
    	@media screen and (min-width: 1500px){ .conWidth{width:50%;}}
    	@media screen and (min-width: 1700px){ .conWidth{width:40%;}}
    	
    	@media screen and (max-width: 991px){ .pull-down{margin-top:0;margin-bottom:20px;}}
    	@media screen and (min-width: 992px){ .pull-down{margin-top:30px;}}
    	
    	
    	.fb-sign-up{
    		background-color: #3A53A0;
    		width: 220px;
    		height: 34px;
    		display: block;
    		color: #fff!important;
    		padding-top: 8px;
    		text-align: center;
    		-webkit-border-radius: 3px;
    		border-radius: 3px;
    		text-decoration: none!important;
    	}
    	
    	
    </style>
    <!--[if gte IE 9]>
	  <style type="text/css">
	    .gradient {
	       filter: none;
	    }
	  </style>
	<![endif]-->
	<script src="/resources/js/jquery-1.11.0.js"></script>
	<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
	<script src="/resources/js/bootstrap.js"></script>
	<script type="text/javascript">
		var check1 = false;
		var check2 = false;
		var check3 = false;
		var check4 = false;
		
		/* 숫자만 입력 가능하도록 */
		function onlyNumber(event) {
		    var key = window.event ? event.keyCode : event.which;
		    if ((event.shiftKey == false) && ((key  > 47 && key  < 58) || (key  > 95 && key  < 106)
		    || key  == 35 || key  == 36 || key  == 37 || key  == 39  // 방향키 좌우,home,end  
		    || key  == 8  || key  == 46 || key == 9)
		    ) {
		        return true;
		    }else {
		        return false;
		    }    
		};

		/* 페이스북 SDK 초기화 */ 
		window.fbAsyncInit = function() {
			FB.init({appId: '1470611313169572', status: true, cookie: true,xfbml: true});	
			
            FB.Event.subscribe('auth.login', function(response) {
            	location.href= "/fb_login";
            });
            FB.Event.subscribe('auth.authResponseChange', function(response) {
                if (response.status === 'connected') {
                	window.location ="/fb_login";
                }else if (response.status === 'not_authorized') {
                	
                }else{
                	
                }
            });   
        };
			
		(function(d){
		     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
		     if (d.getElementById(id)) return;
		     js = d.createElement('script'); js.id = id; js.async = true;
		     js.src = "//connect.facebook.net/ko_KR/all.js";
		     ref.parentNode.insertBefore(js, ref);
		 }(document));
		
		$(document).ready(function(){
			$("#registForm").hide().show('blind',{},1400);
			
			$(window).resize(function () {
				if ($(window).innerWidth() <= 976) {
                    $(".pull-down").css('margin-top', 0);
                    $(".pull-down").css('margin-bottom', 20);
                }else{
                	$(".pull-down").css('margin-top', 30);
                }
	        });
			
			/* 휴대폰번호 국가 선택 */
			$('.dropdown-menu li a').on('click', function(){
    			$(this).parent().parent().find('li').each(function(){
    				$(this).removeClass();
    			});
    			$(this).parent().addClass('active');
    			$("#Phone_NationCode").val($(this).parent().val());
    			$('button.dropdown-toggle').html($(this).text());
    		});
			
			/* 생년월일 추가 */
			for(var year=2014;year>1905;year--){
				$("#InputYear").append("<option value="+year+">"+year+"</option>");
			}
			for(var month=1;month<13;month++){
				$("#InputMonth").append("<option value="+month+">"+month+"월</option>");
			}
			for(var day=1;day<32;day++){
				$("#InputDay").append("<option value="+day+">"+day+"일</option>");
			}
			
			$("#InputYear").change(function(){
				if($(this).val() != "연도"){
					$(this).parent().removeClass().addClass("form-group has-success");
				}
			});
			$("#InputMonth").change(function(){
				if($(this).val() != "월"){
					$(this).parent().removeClass().addClass("form-group has-success");
				}
			});
			$("#InputDay").change(function(){
				if($(this).val() != "일"){
					$(this).parent().removeClass().addClass("form-group has-success");
				}
			});
		});//end ready
		
		function checkValidate(id){
			
			var errorCss = "<span style='color:#BF0000;'><i class='glyphicon glyphicon-remove'></i>";
			var successCss = "<span style='color:#5CB85C;'><i class='glyphicon glyphicon-ok'></i>";
			
			if($("#"+id).val() == ""){
				if(id == "InputPhone"){ 
					$("#PhoneState").html(errorCss+"&nbsp;휴대폰 번호를 입력해주세요</span>");
					$("#InputPhone").parent().parent().addClass("form-group has-error");
				}else if(id == "InputEmail"){
					$("#EmailState").html(errorCss+"&nbsp;이메일을 입력해 주세요</span>");
					$("#InputEmail").parent().addClass("form-group has-error");
				}else if(id == "InputPassword"){
					$("#PasswordState").html(errorCss+"&nbsp;비밀번호를 입력해 주세요</span>");
					$("#InputPassword").parent().addClass("form-group has-error");
				}else{ 
					$("#NameState").html(errorCss+"&nbsp;이름을 입력해 주세요</span>");
					$("#InputName").parent().addClass("form-group has-error");
				}
			}else{
				if(id == "InputPhone"){
					if($("#InputPhone").val().length < 10){
						$("#PhoneState").html(errorCss+"&nbsp;휴대폰 번호를 정확히 입력해 주세요</span>");
						$("#InputPhone").parent().parent().removeClass().addClass("form-group has-error");
					}else{
						$("#PhoneState").html(successCss+"&nbsp;좋습니다</span>");
						$("#InputPhone").parent().parent().removeClass().addClass("form-group has-success");
						check1 = true;
					}
				}else if(id == "InputEmail"){
					eCheck=/^[_a-zA-Z0-9]+([-+.][_a-zA-Z0-9]+)*@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/i;
					if(eCheck.test($("#InputEmail").val())){
						$("#EmailState").html(successCss+"&nbsp;좋습니다</span>");
						$("#InputEmail").parent().removeClass().addClass("form-group has-success");
						check2 = true;
					}else{
						$("#EmailState").html(errorCss+"&nbsp;올바른 이메일 형식으로 입력해 주세요</span>");
						$("#InputEmail").parent().removeClass().addClass("form-group has-error");
					}
				}else if(id == "InputPassword"){
					if($("#"+id).val().length < 5){
						$("#PasswordState").html(errorCss+"&nbsp;6자 이상으로 해주세요</span>");
						$("#InputPassword").parent().removeClass().addClass("form-group has-error");
					}else{
						$("#PasswordState").html(successCss+"&nbsp;좋습니다</span>");
						$("#InputPassword").parent().removeClass().addClass("form-group has-success");
						check3 = true;
					}
				}else{
					$("#NameState").html(successCss+"&nbsp;좋습니다</span>");
					$("#InputName").parent().removeClass().addClass("form-group has-success");
					check4 = true;
				}
			}
		}
		/* 가입버튼 */
		function signup(f){
			$("input").each(function(){
				if($(this).val() == ""){
					if($(this).attr("id") == "InputPhone"){
						$("#InputPhone").parent().parent().removeClass().addClass("form-group has-error");
					}else{
						$(this).parent().removeClass().addClass("form-group has-error");
					}
				}
			});
			if(check1 && check2 && check3 && check4){
				if($("#InputYear").val() == "연도"){
					$("#InputYear").parent().removeClass().addClass("form-group has-error");
					$("#signupButton").effect("shake",{times:2},200);
				}
				if($("#InputMonth").val() == "월"){
					$("#InputMonth").parent().removeClass().addClass("form-group has-error");
					$("#signupButton").effect("shake",{times:2},200);
				}
				if($("#InputDay").val() == "일"){
					$("#InputDay").parent().removeClass().addClass("form-group has-error");
					$("#signupButton").effect("shake",{times:2},200);
				}
				if($("#InputYear").val() != "연도" && $("#InputMonth").val() != "월" && $("#InputDay").val() != "일"){
					if($("input:radio[id='optionsGender']").is(":checked") != false){
						f.action = "memberRegist";
						f.submit();
					}else{
						$("#signupButton").effect("shake",{times:2},200);
					}
				}
			}else{
				$("#signupButton").effect("shake",{times:2},200);
			}		
		}
	</script>
  </head>

  <body>

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" style="border-bottom:1px #CFCFCF solid;">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/" style="font-family: 'Alef', sans-serif; color:#624E98">Circles</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">언어 : <span id="selectLang">한국어</span><b class="caret"></b></a>
              <ul class="dropdown-menu" style="min-width: 125px;">
                <li class="active"><a href="#">한국어</a></li>
                <li><a href="javascript:alert('English service is coming soon')" >English</a></li>
                <li><a href="javascript:alert('中国服务准备')">简体中文</a></li>
                <li><a href="javascript:alert('日本のサービスは準備中です')">日本語</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
    <!-- Fixed navbar -->
   	<div class="container conWidth">
   		<div id="registForm" class="well" style="background-color:#fff; margin-top:25px;">
   			<h2>지금 가입하세요</h2>
   			<small>모든 서비스가 무료로 제공됩니다</small>
   			<br><br>
   			<form role="form" method="post" id="f">
   				<div class="row">
   					<div class="col-md-7">
   						<div class="form-group">
   						<label for="InputPhone">휴대폰</label><br>
	    				<div class="input-group">
	    					<div class="input-group-btn has-error">
	    						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">대한민국(+82) <span class="caret"></span></button>
    							<ul class="dropdown-menu" style="min-width: 0px;">
    								<li class="active" value="82"><a href="#">대한민국(+82)</a></li>
    								<li value="1"><a href="#">미국(+1)</a></li>
    								<li value="86"><a href="#">중국(+86)</a></li>
    								<li value="81"><a href="#">일본(+81)</a></li>
    							</ul>
    							<input type="hidden" id="Phone_NationCode" name="Phone_NationCode" value="82">
	    					</div><!-- /btn-group -->
	    					<input type="text" class="form-control" id="InputPhone" name="InputPhone" title="휴대폰번호" placeholder="휴대폰 번호" onkeyup="checkValidate(this.id);" onkeydown="return onlyNumber(event)" maxlength="11" autofocus="autofocus" tabindex="1">
						</div>
						</div>
					</div>
					<div class="col-md-5">
						<div class="pull-down"><span id="PhoneState">휴대폰번호 11자리를 입력해주세요</span></div>
					</div>
				</div><!-- end row -->
   				<div class="row">
   					<div class="col-md-7">
	    				<div class="form-group">
	    					<label for="InputEmail">이메일</label>
							<input type="text" class="form-control" id="InputEmail" name="InputEmail" title="이메일" placeholder="이메일" onblur="checkValidate(this.id);" maxlength="45" tabindex="2">
						</div>
					</div>
					<div class="col-md-5">
						<div class="pull-down"><span id="EmailState"></span></div>
					</div>
				</div><!-- end row -->
				<div class="row">
   					<div class="col-md-7">
	    				<div class="form-group">
	    					<label for="InputPassword">비밀번호</label>
							<input type="password" class="form-control" id="InputPassword" name="InputPassword" title="비밀번호" placeholder="비밀번호" onblur="checkValidate(this.id);" maxlength="20" tabindex="3">
						</div>
					</div>
					<div class="col-md-5">
						<div class="pull-down"><span id="PasswordState"></span></div>
					</div>
				</div><!-- end row -->
   				<div class="row">
   					<div class="col-md-7">
	    				<div class="form-group">
	    					<label for="InputName">이름</label>
							<input type="text" class="form-control" id="InputName" name="InputName" title="이름" placeholder="이름" onblur="checkValidate(this.id);" maxlength="30" tabindex="4">
						</div>
					</div>
					<div class="col-md-5">
						<div class="pull-down"><span id="NameState"></span></div>
					</div>
				</div><!-- end row -->
				<div class="row">
   					<div class="col-md-7">
	    				<div class="form-group">
	    					<label for="InputYear">생년월일</label><br>
							<label><select class="form-control" id="InputYear" name="InputYear" title="연도" tabindex="5"><option style="display:none;">연도</option></select></label>
							<label><select class="form-control" id="InputMonth" name="InputMonth" title="월" tabindex="6"><option style="display:none;">월</option></select></label>
							<label><select class="form-control" id="InputDay" name="InputDay" title="일" tabindex="7"><option style="display:none;">일</option></select></label>
						</div>
					</div>
					<div class="col-md-5">
						<div class="pull-down"><span id="NameState"></span></div>
					</div>
				</div><!-- end row -->
				<div class="row">
   					<div class="col-md-12">
   						<div class="form-group">
		    				<div class="radio-inline">
		    					<label title="남성"><input type="radio" name="optionsGender" id="optionsGender" value="male">남성</label>
							</div>
							<div class="radio-inline">
								<label title="여성"><input type="radio" name="optionsGender" id="optionsGender" value="female">여성</label>
							</div>
						</div>
					</div>
				</div><!-- end row -->
				<div id="signupButton"><button type="button" class="btn btn-success btn-lg btn-block" onclick="signup(f);" title="가입하기">가입하기</button></div>
	    	</form>
   		</div><!-- end well -->
   		<div class="fb-login-button" data-max-rows="1" data-size="large" data-show-faces="false" data-auto-logout-link="false" data-scope="user_birthday,email,user_likes,user_hometown">페이스북으로 회원가입</div>
   	</div><!-- end container -->
    
    
    
    <!-- footer -->
	<div class="hidden-xs">
		<jsp:include page = "footer.jsp" flush="false"/>
	</div>
	<!-- footer -->
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    
  </body>
</html>